<template>
  <div>
    <table v-if="list.length && recharge" class="cs-detail-card">
      <tr>
        <td>土豪等级：</td>
        <td>{{ list[list.length - 1].rLevel }}</td>
        <td>钻石累计消耗：</td>
        <td>{{ recharge.diamondConsume / 10 }}</td>
      </tr>
      <tr>
        <td>土豪值：</td>
        <td>{{ list[list.length - 1].rDiamonds }}</td>
        <td>文字聊天钻石消耗：</td>
        <td>{{ recharge.chatConsume / 10 }}</td>
      </tr>
      <tr>
        <td>累计充值金额：</td>
        <td>{{ '-' }}</td>
        <td>语音聊天钻石消耗：</td>
        <td>{{ recharge.voiceConsume / 10 }}</td>
      </tr>
      <tr>
        <td>累计充值次数：</td>
        <td>{{ rechargeList.total }}</td>
        <td>视频聊天钻石消耗：</td>
        <td>{{ recharge.videoConsume / 10 }}</td>
      </tr>
      <tr>
        <td>累计获得钻石：</td>
        <td>{{ recharge.diamondTotal / 10 }}</td>
        <td>送礼钻石消耗：</td>
        <td>{{ recharge.giftConsume / 10 }}</td>
      </tr>
      <tr>
        <td>当前钻石：</td>
        <td>{{ detail.diamonds }}</td>
      </tr>
    </table>

    <div class="cs-filter-container" style="margin-top:20px">
      <el-select v-model="listQuery.payStatus" placeholder="支付状态">
        <el-option label="已创建" value="0" />
        <el-option label="已付款" value="1" />
        <el-option label="已取消" value="2" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="getRecharge"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="rechargeList.rechargeOrderList"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        >
        <el-table-column align="center" label="充值金额">
          <template slot-scope="{ row }">{{ row.amount }}</template>
        </el-table-column>
        <el-table-column align="center" label="计费点">
          <template slot-scope="{ row }">{{ row.rechargeName }}</template>
        </el-table-column>
        <el-table-column align="center" label="订单创建时间">
          <template slot-scope="{ row }">{{ row.orderCreateTime | parseTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="我方订单号">
          <template slot-scope="{ row }">{{ row.orderId }}</template>
        </el-table-column>
        <el-table-column align="center" label="对方订单号">
          <template slot-scope="{ row }">{{ row.tradeNo }}</template>
        </el-table-column>
        <el-table-column align="center" label="订单支付时间">
          <template slot-scope="{ row }">{{ row.orderPayTime | parseTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="支付渠道">
          <template slot-scope="{ row }">{{
            payOptions[row.payChannelType] &&
              payOptions[row.payChannelType].name
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="支付状态">
          <template slot-scope="{ row }">{{
            statusOptions[row.payStatus] && statusOptions[row.payStatus].name
          }}</template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="rechargeList.total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>
<script>
import TablePagination from '@/components/TablePagination'
import { xhrGetDiamond, xhrPayOrderList } from '@api/account'
export default {
  components: { TablePagination },
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    detail: {
      type: Object,
      default: null
    }
  },
  data() {
    const query = this.$route.query
    return {
      userId: (query && query.id) || null,
      listQuery: {
        payStatus: null
      },
      listLoading: true,
      recharge: null,
      rechargeList: {},
      daterangeValue: [],
      payOptions: [
        { payment: 0, name: '微信' },
        { payment: 1, name: '支付宝' },
        { payment: 2, name: 'AppStore' },
        { payment: 3, name: '现在支付-支付宝' },
        { payment: 4, name: '现在支付-微信' },
        { payment: 6, name: '谷歌支付'},
        { payment: 7, name: 'PayerMax'}
      ],
      // 支付状态
      statusOptions: [
        { status: 0, name: '已创建' },
        { status: 1, name: '已付款' },
        { status: 2, name: '已取消' }
      ]
    }
  },
  created() {
    this.getRecharge()
  },
  methods: {
    doSearch() {
      this.getRecharge()
    },
    getRecharge() {
      this.listQuery.userId = this.userId
      xhrGetDiamond(this.listQuery)
        .then(resp => {
          this.recharge = resp.data
        })
        .catch(err => {
          this.$message.error(err)
        })
      xhrPayOrderList(this.listQuery)
        .then(resp => {
          this.rechargeList = resp.data
          this.listLoading = false
        })
        .catch(err => {
          this.listLoading = false
          this.$message.error(err)
        })
    }
  }
}
</script>
